<template>
  <!-- 扫码登录 -->
  <div class="login-QR-code" ref="aaa">
    <span>扫码登录 &nbsp;安全快捷</span>
    <img class="QR-code" :src="require('pc_img/login/二维码.png')" alt="" />
    <span>请使用手机扫一扫，扫码登录</span>
    <span>支持扫码登录的APP</span>
    <ul class="login-items">
      <li class="item">
        <img :src="require('pc_img/login/qqicon.png')" alt="" />
      </li>
      <li class="item">
        <img :src="require('pc_img/login/微信标志.png')" alt="" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  inject: [ 'changeQrLogin' ],
  mounted () {
    document.onclick = function (e) {
      // vue 点击其他地方隐藏dom
      if (this.$refs.aaa) {
        // 这句话是说如果我们点击到了class为keywordContainer以外的区域
        if (!this.$refs.aaa.contains(e.target) && e.target.className !== 'QrBtn') {
          this.changeQrLogin(false)
        }
      }
    }.bind(this)
  }
}
</script>
